import React, { useCallback, useMemo, useEffect } from "react";
import Taro from "@tarojs/taro";
import { View, Image } from "@tarojs/components";
import { observer } from "mobx-react";
import i18n from "i18n-js";
import { GStyleSheet } from "@/utils/DarkMode";
import PageContainer from "@/components/PageContainer";
import FlexScrollView from "@/components/FlexScrollView";
import ListItem from "@/components/ListItem";
import addIcon from '@/assets/images/icon_add_circle.png';
import Toast from "@/utils/Toast";
import { getAppInfo } from '@/config/template';
import { useLanguageStore, useAlarmPushStore } from '@/hooks'
import AlarmPushModel from '@/models/alarmPush'


const dstyle = GStyleSheet.create({
  scroll: {

  },
  icon: {
    width: 24,
    height: 24,
  }
});

// 安卓上手机号码有区号的，不带+打不出去；
const phoneList = [
  { phone: '051668971015' },
  // { phone: '02131314171' },
  // { phone: '10086' }, { phone: '+8613412341234' },
  // { phone: '13412341234' }
]


const AlarmAddressBook: React.FC = () => {

  const styles = dstyle.useDynamicStyle();
  const { key } = useLanguageStore();
  const { callNumberList } = useAlarmPushStore();
  const appInfo = useMemo(() => {
    return getAppInfo(key);
  }, [key]);

  useEffect(() => {
    AlarmPushModel.getWhitePhoneNumberList();
  }, [])

  const addToAddressBook = useCallback((i) => {
    const firstName = `${appInfo.name}${i18n.t('ALARM_PHONE')}${i.index + 1}`
    Taro.addPhoneContact({
      firstName, mobilePhoneNumber: i.phone, complete: (res) => {
        const { errMsg } = res;
        if (errMsg.includes('auth deny')) {
          Toast.info(i18n.t('ADDRESS_BOOK_PERMISSION'))
        }
        console.log('addPhoneContact', res);
      }
    })
  }, [appInfo])

  return (
    <PageContainer title={i18n.t('ADD_ADDRESS_BOOK')} >
      <View style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
        <FlexScrollView id='phoneList' scrollStyle={styles.scroll}>
          {callNumberList.map((i, index) => {
            const { callNumber } = i;
            return (<ListItem
              key={callNumber}
              extra={<Image src={addIcon} onClick={() => { addToAddressBook({ ...i, index }) }} style={styles.icon} />}
            >
              {callNumber}
            </ListItem>)
          })}

        </FlexScrollView>
      </View>
    </PageContainer >
  );
}

export default observer(AlarmAddressBook);
